<template>
  <div class="tab">
    <Form :model="modify" :label-width="80">
        <FormItem label="账号">
            <Input v-model="modify.u_name" disabled></Input>
        </FormItem>
        <FormItem label="密码" >
           <Checkbox @on-change="fixPwd=!fixPwd">修改密码</Checkbox>
          <Input :disabled="fixPwd" password type="password" v-model="uPwd" @on-blur="handlePwd"></Input>
        </FormItem>
         <FormItem label="头像">
            <Input v-model="modify.u_photo" type="url"></Input>
        </FormItem>
        <FormItem label="状态">
            <Input v-model="modify.u_status" type="number" maxlength='1'></Input>
        </FormItem>
        <FormItem label="昵称">
            <Input v-model="modify.u_nick"></Input>
        </FormItem>
        <FormItem label="性别">
            <Input v-model="modify.u_sex"></Input>
        </FormItem>
        <FormItem label="电话">
            <Input v-model="modify.u_phone" type="tel" maxlength='11' min='11'></Input>
        </FormItem>
        <FormItem label="邮箱">
            <Input v-model="modify.u_email" type="email"></Input>
        </FormItem>
         <FormItem label="选择角色">
            <!-- <Input v-model="modify.r_id"></Input> -->
            <div class="addmod">
              <div style=" border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
              <RadioGroup  
                v-model="radioVal"
                @on-change="checkAllGroupChange"
                v-if="roleList.length>0"
              >
                <Radio  v-for="(el,index) in roleList" :key="index" :label="el.value"></Radio >
              </RadioGroup >
            </div>
          </div>
        </FormItem>
    </Form>
  </div>
</template>

<script>
import addmod from './addmod'
import conf from '@/api/apiConf'
export default {
  props: ['modify'],
  components: {
    addmod,
  },
  data:()=>{
    return {
      fixPwd:true,
      roleList:[],
      roleDef:'',
      radioVal:'',
      uPwd:'',
    }
  },
  created(){
    this.fixPwd=true
    this.searchRole()
  },

  methods: {
    handlePwd(){
      this.modify.u_pwd=this.uPwd
      this.fixPwd=true
      this.uPwd=''
    },
    checkAllGroupChange(res){
      this.roleList.forEach(el=>{
        if(el.value==res)this.modify.r_id=el.lable
      })
    },
    searchRole(){
      this.$http.get(conf.GetAllRole).then((res) => {
        if (res.data.status == 200) {
          let arr=[]
          res.data.data.forEach(el=>{
            arr.push({
              value:el.r_name,
              lable:el.r_id
            })
            if(el.r_id===this.modify.r_id)this.roleDef=el.r_name
          })

          this.roleList=arr
        } else {
          this.$Message.error('获取角色信息失败!')
        }
      })
    }
  },
}
</script>

<style>
</style>
